<template>
    <div class="login-container">
        <div class="login-box">
            <el-container>
                <el-header></el-header>
                <el-container>
                    <el-aside>
                        <img src="../assets/login_2.png">
                    </el-aside>
                    <el-main>     
                        <div class="font">欢迎登录烘焙帮<br>后台管理系统</div>
                        <el-form ref="loginForm" :model="loginData" :rules="loginRules">
                            <el-form-item prop="admin_name">
                                 <el-input  v-model="loginData.admin_name" placeholder="请输入用户名..." clearable/>
                            </el-form-item>
                            <el-form-item prop="admin_pwd" >
                                 <el-input type="password" v-model="loginData.admin_pwd" placeholder="请输入密码..." clearable show-password/>
                            </el-form-item>
                            <el-form-item>
                                <el-row type="flex" justify="center">
                                    <el-button :plain="true" type="primary" style="color:azure"  @click="userLogin" round>
                                        登录
                                    </el-button>
                                </el-row>
                            </el-form-item>  
                        </el-form>
                    </el-main>
                </el-container>
            </el-container>
        </div>

    </div>
</template>

<script>
    export default {
         data(){
            return {
                loginData: {
                    admin_name: "",
                    admin_pwd: "", 
                },
                loginRules:{
                    admin_name:[
                        {required:true,message:"用户名不能为空" ,trigger:"blur"}
                    ],
                    admin_pwd:[
                        {required:true,message:"密码不能为空" ,trigger:"blur"}
                    ],
                },  

            }
        },
        methods:{
              userLogin(){
                    this.$refs.loginForm.validate((value)=>{
                    if(!value)  return;
                    console.log(this.loginData);
                    this.$http.post('/loginhou',this.loginData).then(res=>{
                       console.log(res);
                        if(res.data.code==200){
                            // 保存token信息
                            window.sessionStorage.setItem("token", res.data.token);
                            this.$message({
                                message:'登录成功，欢迎进入烘焙帮后台管理系统',
                                type:'success',
                                duration:2000
                            })
                             this.$router.push('component')
                        }else if(res.data.code==501){
                            this.$message({
                                message:'您不是管理员，请重新输入用户名',
                                type:'error',
                               
                            })
                        }else{
                           this.$message({
                                message:'密码错误，请重新输入密码',
                                type:'error',    
                            })                            
                        }
                        
                        
                     })
                    })
               }, 
        },
        
    }
</script>

<style lang="scss" scoped>
*{
    font-family: "黑体";
    color: azure;
    
}
.login-container{
    // 设置背景图片logi.png
    background-image: url("../assets/login_1.png");
     /* div充满全屏 */
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    /* 背景图调整大小: cover */
    background-size: cover;
}
.login-box{
    width: 70vw;
    height: 80vh;
    background-color:#5680b0;//#6b93c2
    position:absolute;
    top:10%;
    left: 15%;
    border-radius: 24px;
    
}
.el-header{
    //background-color: #0b468a;
    height: 9vh;
    width: 20vw;
    margin: 4vh  5vw;
    border-radius: 10px;
     /* 文字水平垂直居中 */
    text-align: center;
    line-height: 9vh;
    color: black;
    font-size: 20px;
}
.el-aside{
    //background-color: #0b468a;
    height: 50vh;
    width: 10%;
    margin: 2vh  2vw 0 5vw;
    border-radius: 10px;
    img{
        width: 90%;
        height: 55%;
        margin-top:6vh;
        padding-left: 2vw;
    }
}
.el-main{
    //border:1px solid #0b468a;
    height: 50vh;
    width: 25vw;
    margin: 2vh  0 2vh 4vw;
    padding-right: 0;
    border-radius: 10px;
    div{
        margin:0;
        height: 20%;
        font-size: 2vw;
    }
    .font{
        width: 70%;
        text-align: center;
        line-height:100%;
    }
    .el-form{
        width: 70%;
        text-align: center;
        line-height:100%;
        .el-input{
        margin-top:3vh;
        background: rgba(11,70,138,0.5);
        font-size: 1.15vw;
        } 
        .el-input__inner{
             background-color: #5680b0;
             border-radius:25px;
        }
        .el-button{
            margin-top: 3vh;
            width:100%; 
            height: 15%;
            
        }
        .el-button--primary{
            background-color: #5680b0;
            font-size: 1.6vw;
        }
        .el-button--primary.is-plain{
            color:black
        }
        ::v-deep .el-input__inner{
            background-color: #5680b0 !important;
            color:black;
            border: 1px solid #b3d8ff;
        }
       
       
    }
    

}

</style>